<!--
 * @Author: “Jackson” “1145239633@qq.com”
 * @Date: 2025-07-16 16:24:03
 * @LastEditors: “Jackson” “1145239633@qq.com”
 * @LastEditTime: 2025-10-09 11:36:23
 * @FilePath: \shaangu-web\src\views\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div v-if="actived == 0">
      <div class="header">
        <div
          v-for="(item, index) in headerData"
          :key="index"
          class="header_square"
        >
          <div class="bgs" :style="{ background: hasColor(index) }"></div>
          <div class="content">
            <div class="img-box"><img :src="item.imgs" alt="" /></div>
            <div class="text-box">
              <div class="number">
                <div>{{ item.num }}</div>
                <div>{{ item.unit }}</div>
              </div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="seconds">
        <div class="seconds_content" style="width: 50%">
          <div class="seconds_header">
            <div class="line"></div>
            <div>生产年份分布</div>
          </div>
          <div class="seconds_bottom">
            <div ref="bar" class="chart" id="bar"></div>
          </div>
        </div>
        <div class="seconds_content">
          <div class="seconds_header">
            <div class="line"></div>
            <div>机组布置分布</div>
          </div>
          <div class="seconds_bottom">
            <div ref="line" class="chart" id="line"></div>
          </div>
        </div>
        <div class="seconds_content">
          <div class="seconds_header">
            <div class="line"></div>
            <div>类别分布</div>
          </div>
          <div class="seconds_bottom">
            <div ref="chart" class="chart" id="chart"></div>
          </div>
        </div>

        <!-- <div class="seconds_content">
          <div class="seconds_header">
            <div class="line"></div>
            <div>事故类型</div>
          </div>
          <div class="seconds_bottom">
            <div ref="redar" class="chart" id="redar"></div>
          </div>
        </div> -->
      </div>
      <div class="seconds">
        <div class="seconds_content" style="width: 50%">
          <div class="seconds_header">
            <div class="line"></div>
            <div>支承轴承直径</div>
          </div>
          <div class="seconds_bottom">
            <div ref="chart1" class="chart" id="chart1"></div>
          </div>
        </div>
        <div class="seconds_content">
          <div class="seconds_header">
            <div class="line"></div>
            <div>主轴连接</div>
          </div>
          <div class="seconds_bottom">
            <div ref="chart2" class="chart" id="chart2"></div>
          </div>
        </div>
        <div class="seconds_content">
          <div class="seconds_header">
            <div class="line"></div>
            <div>叶根形式</div>
          </div>
          <div class="seconds_bottom">
            <div ref="pie1" class="chart" id="pie1"></div>
          </div>
        </div>
      </div>

      <div class="seconds">
        <div class="seconds_content" style="width: 50%">
          <div class="seconds_header">
            <div class="line"></div>
            <div>推力轴承直径</div>
          </div>
          <div class="seconds_bottom">
            <div ref="chart3" class="chart" id="chart3"></div>
          </div>
        </div>
        <div class="seconds_content" style="width: 50%">
          <div class="seconds_header">
            <div class="line"></div>
            <div>机型</div>
          </div>
          <div class="seconds_bottom">
            <div ref="bar1" class="chart" id="bar1"></div>
          </div>
        </div>
      </div>
      <div class="seconds">
        <div class="seconds_content" style="width: 100%">
          <div class="seconds_header">
            <div class="line"></div>
            <div>计算文件</div>
          </div>
          <div class="seconds_bottom">
            <div ref="bar2" class="chart" id="bar2"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="noempty">
      <el-empty description="暂未开发，敬请期待中！"></el-empty>
    </div>
  </div>
</template>
<script>
import img1 from "../assets/images/1.png";
import img2 from "../assets/images/2.png";
import img3 from "../assets/images/3.png";
import img4 from "../assets/images/4.png";
import img5 from "../assets/images/5.png";
import { getPie, getPie1 } from "../utils/getPie";
import { getBar } from "../utils/bar";
import { getLine, getLine1 } from "../utils/line";
import { getRedar } from "../utils/radar";
import {
  count,
  accidentCount,
  reportCount,
  currentYearCount,
  categoryDistribution,
  last10YearsDistribution,
  unitLayoutDistribution,
  spindleConnectionDistribution,
  bearingDiameterDistribution,
  bladeRootTypeDistribution,
  thrustBearingDiameterPiePure,
  calcFileDistribution,
  productModelDistribution,
  categoryTypeInfo,
} from "@/api/home";
export default {
  data() {
    return {
      actived: 0,
      bar2: null,
      bar1: null,
      chart3: null,
      pie1: null,
      chart2: null,
      redar: null,
      line: null,
      bar: null,
      chart: null,
      chart1: null,
      headerData: [
        {
          id: "1",
          name: "总产品数量",
          num: 0,
          unit: "台",
          imgs: img1,
          color: "#4AA7EB",
        },
        {
          id: "2",
          name: "事故记录数量",
          num: 0,
          unit: "次",
          imgs: img2,
          color: "#36CBCB",
        },
        {
          id: "3",
          name: "报告上传数量",
          num: 0,
          unit: "份",
          imgs: img3,
          color: "#FBD466",
        },
        {
          id: "4",
          name: "年度新增产品数",
          num: 0,
          unit: "台",
          imgs: img4,
          color: "#919BFA",
        },
        {
          id: "5",
          name: "不同类别覆盖数",
          num: 0,
          unit: "类",
          imgs: img5,
          color: "#FF9F29",
        },
      ],
    };
  },
  created() {
    this.actived = localStorage.getItem("actived");
    if (this.actived == 0) {
      count().then((res) => {
        this.headerData[0].num = res.data;
      });
      accidentCount().then((res) => {
        this.headerData[1].num = res.data;
      });
      reportCount().then((res) => {
        this.headerData[2].num = res.data;
      });
      currentYearCount().then((res) => {
        this.headerData[3].num = res.data;
      });
      categoryTypeInfo().then((res) => {
        this.headerData[4].num = res.data.count;
      });
    }
  },
  mounted() {
    if (this.actived == 0) {
      // 类别分布
      categoryDistribution().then((res) => {
        this.$nextTick(() => {
          this.chart = this.$echarts.init(this.$refs.chart);
          let option = getPie(res.data);
          this.chart.setOption(option);
        });
      });
      last10YearsDistribution().then((res) => {
        this.$nextTick(() => {
          // 生产年份
          this.bar = this.$echarts.init(this.$refs.bar);
          let xData = res.data.map((item) => item.year);
          let yData = res.data.map((item) => item.count);
          let option1 = getBar(xData, yData);
          this.bar.setOption(option1);
        });
      });

      unitLayoutDistribution().then((res) => {
        this.$nextTick(() => {
          // 机组布置方式
          this.line = this.$echarts.init(this.$refs.line);
          let option2 = getLine(res.data.list);
          this.line.setOption(option2);
        });
      });

      spindleConnectionDistribution().then((res) => {
        this.$nextTick(() => {
          //主轴连接
          this.chart2 = this.$echarts.init(this.$refs.chart2);
          let option5 = getPie(res.data.data);
          this.chart2.setOption(option5);
        });
      });

      bearingDiameterDistribution().then((res) => {
        this.$nextTick(() => {
          // 支承
          this.chart1 = this.$echarts.init(this.$refs.chart1);
          let xData = res.data.map((item) => item.name);
          let yData = res.data.map((item) => item.value);
          let option4 = getLine1(xData, yData);
          this.chart1.setOption(option4);
        });
      });
      //事故类型
      // this.redar = this.$echarts.init(this.$refs.redar);
      // let option3 = getRedar();
      // this.redar.setOption(option3);

      bladeRootTypeDistribution().then((res) => {
        this.$nextTick(() => {
          //叶根形式
          this.pie1 = this.$echarts.init(this.$refs.pie1);
          let option6 = getPie1(res.data.data);
          this.pie1.setOption(option6);
        });
      });

      thrustBearingDiameterPiePure().then((res) => {
        this.$nextTick(() => {
          //推力
          this.chart3 = this.$echarts.init(this.$refs.chart3);
          let xData = res.data.map((item) => item.name);
          let yData = res.data.map((item) => item.value);
          let option7 = getLine1(xData, yData);
          this.chart3.setOption(option7);
        });
      });

      //机型
      productModelDistribution().then((res) => {
        this.$nextTick(() => {
          this.bar1 = this.$echarts.init(this.$refs.bar1);
          let option8 = getBar(res.data.models, res.data.counts);
          this.bar1.setOption(option8);
        });
      });
      calcFileDistribution().then((res) => {
        this.$nextTick(() => {
          //计算文件
          this.bar2 = this.$echarts.init(this.$refs.bar2);
          let option9 = getBar(res.data.fileTypes, res.data.counts);
          this.bar2.setOption(option9);
        });
      });

      //根据窗口变化自动调节图表大小
      const that = this;
      window.onresize = function () {
        that.changeSize();
      };
    }
  },
  methods: {
    // 自适应宽高
    changeSize() {
      this.pie && this.pie.resize();
      this.bar2 && this.bar2.resize();
      this.bar1 && this.bar1.resize();
      this.chart3 && this.chart3.resize();
      this.pie1 && this.pie1.resize();
      this.chart2 && this.chart2.resize();
      this.redar && this.redar.resize();
      this.line && this.line.resize();
      this.bar && this.bar.resize();
      this.chart && this.chart.resize();
      this.chart1 && this.chart1.resize();
    },
    hasColor(index) {
      if (index >= 0 && index < this.headerData.length) {
        return this.headerData[index].color;
      }
      return "#000"; // 默认颜色
    },
  },
};
</script>
<style lang="scss" scoped>
.noempty {
  height: calc(100vh - 145px);
  width: 100%;
}
.app-container {
  background: #f8fbff;
}
.seconds {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  .seconds_content {
    width: 25%;
    .seconds_bottom {
      width: 100%;
      height: 327px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .chart {
        width: 100%;
        height: 280px; /* 统一高度 */
      }
    }
    .seconds_header {
      height: 40px;
      line-height: 40px;
      background: #f9f9f9;
      display: flex;
      align-items: center;

      > div:last-child {
        font-size: 18px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        color: #0773c6;
        margin-left: 10px;
      }
      .line {
        width: 3px;
        background: #0773c6;
        height: 16px;
        margin-left: 10px;
      }
    }
  }
}
.header {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  .header_square {
    flex: 1;
    min-width: 0;

    .bgs {
      height: 8px;
    }

    .content {
      height: 169px; /* 固定高度 */
      display: flex;
      align-items: center; /* 垂直居中 */
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 0 20px; /* 左右内边距 */

      .img-box {
        margin-right: 15px;

        img {
          width: 60px;
          height: 60px;
        }
      }

      .text-box {
        margin-left: 40px;
        .number {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          color: #4aa7eb;
          > div:first-child {
            font-size: 32px;
          }
          > div:last-child {
            font-size: 20px;
            margin-left: 10px;
          }
        }

        .name {
          color: #666;
          font-size: 18px;
          font-weight: bold;
          font-family: Microsoft YaHei;
        }
      }
    }
  }
}
</style>
